<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>添加账号</span>
        </div>
        <el-form ref="formRef" :rules="rules" status-icon :model="formData" class="form" size="small"
            label-width="80px">
            <el-form-item label="账号" prop="account">
                <el-input v-model="formData.account">
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="formData.password">
                </el-input>
            </el-form-item>
            <el-form-item label="用户组" prop="userGroup">
                <el-select placeholder="请选择用户组" v-model="formData.userGroup">
                    <el-option value="超级管理员" label="超级管理员"></el-option>
                    <el-option value="普通用户" label="普通用户"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">添加</el-button>
                <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

    </el-card>
</template>
<script>
import { addUserReq } from '@/api/user'
//验证函数
const checkAccount = (rule, value, callback) => {
    //非空验证
    if (!value) {
        callback(new Error('账号不能为空'))

    } else if (!/^[\u4E00-\u9FA5a-zA-Z0-9]{4,16}$/.test(value)) {
        callback(new Error('数字,英文,中文4-16位'))
    } else {
        callback()
    }

}
// 密码验证函数
const checkPassword = (rule, value, callback) => {
    //非空验证
    if (!value) {
        callback(new Error('密码不能为空'))
        //正则验证
    } else if (!/^[a-zA-Z0-9]{4,16}$/.test(value)) {
        callback(new Error('数字,英文4-16位'))
    } else {
        callback()
    }

}

export default {
    data() {
        return {
            formData: {
                account: '',
                password: '',
                userGroup: '',
            },
            rules: {
                account: [{ validator: checkAccount, trigger: 'blur' }],
                password: [{ validator: checkPassword, trigger: 'blur' }],
                userGroup: [{ required: true, message: '请选择用户组', trigger: 'blur' }],
            },
        }
    },
    methods: {
        submit() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          //发送请求
          let res = await addUserReq(this.formData)
          //解构数据
          let {code, msg} = res.data
          //判断
          if (code === 0) {
            //跳转
            this.$router.push('/account')
          }
        }
      })
    },
        reset() {
            this.$refs.formRef.resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.modify {
    height: 100%;
    width: 100%;
    padding: 10px;
    background-color: #f0f2f5;

    .container {
        // height: 216px;
        width: 100%;
        background-color: #ffffff;
        border-radius: 3px;
        box-shadow: 0px 0px 3px rgb(110, 110, 110);

        .titl {
            padding: 14px;
            border-bottom: 1px solid #eee;
        }
    }
}

.form {
    width: 288px;
}
</style>